<template>
  <div class="Enterprise-Main">
    <!--选项卡-->
    <div class="Enterprise-Main-tab">
      <div class="Enterprise-Main-tab-news">
        <div class="Enterprise-Main-tab-img">
          <img :src="headPhoto" alt="">
        </div>
        <span class="Enterprise-Main-tab-news-name">{{EnterpriseInfo.userName}}</span>
      </div>
      <ul class="Enterprise-Main-tab-li">
        <li @click="msg=0" :class="{'LiActive':msg===0}">企业信息</li>
        <li @click="msg=2" :class="{'LiActive':msg===2}">企业认证</li>
        <li @click="msg=1" :class="{'LiActive':msg===1}">更改头像</li>
      </ul>
    </div>
    <!--表单-->
    <ul class="Enterprise-Main-concent">
      <li v-show="msg===0" class="Enterprise-Main-concent-li">
        <Form :model="formItem" :label-width="120" ref="EnterpriseForm">
          <h2 style="margin-bottom: 30px;">企业信息</h2>
          <FormItem label="企业名称" style="width: 40%">
            <Input v-model="formItem.corporateName" placeholder="请输入企业名称" size="large"></Input>
          </FormItem>
          <FormItem label="企业注册地址" style="width: 30%">
            <Input v-model="formItem.registeredAddress" placeholder="请输入企业注册地址" size="large"></Input>
          </FormItem>
          <h2 style="margin-bottom: 30px">法人信息</h2>
          <FormItem label="姓名" style="width: 40%">
            <Input v-model="formItem.legalPersonName" placeholder="请输入您的真实姓名" size="large"></Input>
          </FormItem>
          <FormItem label="性别" style="width: 30%">
            <!--<Input v-model="formItem.legalPersonSex" placeholder="请输入您的性别" size="large"></Input>-->
            <Select v-model="sex_flag" style="" placeholder="请输入您的性别" @on-change="getSex(sex_flag)">
              <Option v-for="(item, index) in sex_arr" :value="item.value" :key="index">{{item.value}}</Option>
            </Select>
          </FormItem>
          <FormItem label="民族" style="width: 20%">
            <!--<Input v-model="formItem.legalPersonNation" placeholder="请输入您的民族" size="large"></Input>-->
            <Select v-model="formItem.legalPersonNation" style="" placeholder="请输入您的民族">
              <Option v-for="(item, index) in nations_arr" :value="item" :key="index">{{item}}</Option>
            </Select>
          </FormItem>
          <FormItem label="生日" style="width: 30%">
            <!--<Input v-model="formItem.legalPersonBirthday" placeholder="请输入您的生日" size="large"></Input>-->
            <DatePicker type="date" v-model="legalPersonBirthday_flag"  style="width: 100%" format="yyyy-MM-dd" @on-change="getTime1"></DatePicker>
          </FormItem>
          <FormItem label="籍贯" style="width: 40%">
            <Input v-model="formItem.legalPersonNativePlace" placeholder="请输入您的籍贯" size="large"></Input>
          </FormItem>
          <FormItem label="现所在地" style="width: 50%">
            <Input v-model="formItem.legalPersonLocation" placeholder="请输入您的现所在地" size="large"></Input>
          </FormItem>
          <FormItem label="职业" style="width: 30%">
            <Input v-model="formItem.legalPersonOccupation" placeholder="请输入您的职业" size="large"></Input>
          </FormItem>
          <FormItem label="企业执照" style="width: 30%" >
            <Card class="Enterprise-Main-concent-li-card">
              <span @click="uploadImg" v-show="formItem.businessLicense === ''" style="cursor: pointer">上传企业执照</span>
              <img :src="formItem.businessLicense" alt="企业执照" v-show="formItem.businessLicense !== ''" style="display: block; width: 100px;height: 100px;margin: auto;margin-top: 50px;">
            </Card>
          </FormItem>
          <FormItem label="法人身份证" style="width: 50%">
            <Card class="Enterprise-Main-concent-li-card cardFlex">
              <span @click="uploadImg" v-show="formItem.corporateIdentityCardIs === ''" style="margin: 0 150px 0 0 ;cursor: pointer">上传法人身份证正面</span>
              <img :src="formItem.corporateIdentityCardIs" alt="法人身份证正面" v-show="formItem.corporateIdentityCardIs !== ''" style="display: block;width: 100px;height: 100px;margin: auto;margin-top: 50px;margin-right: 20px">
              <span @click="uploadImg" v-show="formItem.corporateIdentityCardThe === ''" style="cursor: pointer">上传法人身份证反面</span>
              <img :src="formItem.corporateIdentityCardThe" alt="法人身份证反面" v-show="formItem.corporateIdentityCardThe !== ''" style="display: block;width: 100px;height: 100px;margin: auto;margin-top: 50px;">
            </Card>
          </FormItem>
          <FormItem>
            <Button class="Enterprise-Main-concent-sub" @click="Submit">提交</Button>
            <Button class="Enterprise-Main-concent-can" @click="handleReset()">重置</Button>
          </FormItem>
        </Form>
      </li>
      <li v-show="msg===1" class="Enterprise-Main-concent-li">
        <h2 style="margin-bottom: 20px;">头像上传</h2>
        <Card class="Enterprise-Main-concent-li-card">
          <Upload :action="uploadUrl" :format="['jpg','jpeg','png']" :on-success="HeadPortrait" :show-upload-list=false>
            <Button class="HeadPortrait">更改头像</Button>
          </Upload>
          <img :src="formItem.headphoto" alt="头像" class="HeadPortrait-Img" v-show="formItem.headphoto !== ''">
        </Card>
      </li>
      <li v-show="msg===2" class="Enterprise-Main-concent-li">
        <h2 style="margin-bottom: 20px;">法人身份证证件照上传</h2>
        <Card class="Enterprise-Main-concent-li-card">
          <Upload :action="uploadUrl" :format="['jpg','jpeg','png']" :on-success="EnterpriseCard" :show-upload-list=false>
            <Button style="margin-right: 20px" class="EnterpriseCard">法人身份证正面</Button>
          </Upload>
          <img :src="formItem.corporateIdentityCardIs" alt="法人身份证正面" class="EnterpriseCard-Img"  v-show="formItem.corporateIdentityCardIs !== ''">
          <Upload :action="uploadUrl" :format="['jpg','jpeg','png']" :on-success="EnterpriseCard1" :show-upload-list=false>
            <Button class="EnterpriseCard1">法人身份证反面</Button>
          </Upload>
          <img :src="formItem.corporateIdentityCardThe" alt="法人身份证反面" class="EnterpriseCard1-Img"  v-show="formItem.corporateIdentityCardThe !== ''">
        </Card>
        <h2 style="margin: 20px 0;">企业营业执照上传</h2>
        <Card class="Enterprise-Main-concent-li-card">
          <Upload :action="uploadUrl" :format="['jpg','jpeg','png']" :on-success="BusinessLicense" :show-upload-list=false>
            <Button style="margin-right: 20px" class="businessLicense">营业执照</Button>
          </Upload>
          <img :src="formItem.businessLicense" alt="营业执照" class="businessLicense-Img" v-show="formItem.businessLicense !== ''">
        </Card>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'enterprise',
    data () {
      return {
        msg: 0,
        sex_arr: [
          {
            id: 1,
            value: '男'
          },
          {
            id: 2,
            value: '女'
          }
        ],
        nations_arr: ['汉族', '蒙古族', '回族', '藏族', '维吾尔族', '苗族', '彝族', '壮族', '布依族', '朝鲜族', '满族', '侗族', '瑶族', '白族', '土家族',
          '哈尼族', '哈萨克族', '傣族', '黎族', '傈僳族', '佤族', '畲族', '高山族', '拉祜族', '水族', '东乡族', '纳西族', '景颇族', '柯尔克孜族',
          '土族', '达斡尔族', '仫佬族', '羌族', '布朗族', '撒拉族', '毛南族', '仡佬族', '锡伯族', '阿昌族', '普米族', '塔吉克族', '怒族', '乌孜别克族',
          '俄罗斯族', '鄂温克族', '德昂族', '保安族', '裕固族', '京族', '塔塔尔族', '独龙族', '鄂伦春族', '赫哲族', '门巴族', '珞巴族', '基诺族'],
        // 获取的企业信息
        EnterpriseInfo: {},
        sex_flag: '',
        legalPersonBirthday_flag: '',
        // 修改企业信息表单
        formItem: {
          uuid: '',
          corporateName: '',
          registeredAddress: '',
          legalPersonName: '',
          legalPersonSex: '',
          legalPersonNation: '',
          legalPersonBirthday: '',
          legalPersonNativePlace: '',
          legalPersonLocation: '',
          legalPersonOccupation: '',
          // 头像
          file: '',
          // 身份证
          corporateIdentityCardIs: '',
          corporateIdentityCardThe: '',
          // 营业执照
          businessLicense: '',
          landingEnd: navigator.userAgent
        },
        headPhoto: '',
        // 上传地址
        // uploadUrl: 'http://liudashi.f3322.net:9001/files/upload'
        uploadUrl: 'http://111.206.102.29:9001/files/upload'
      }
    },
    methods: {
      getSex (sex) {
        console.log(sex)
        if (sex === '男') {
          this.formItem.legalPersonSex = 1
        } else {
          this.formItem.legalPersonSex = 2
        }
      },
      // 获取时间
      getTime1 (time) {
        console.log(time)
        this.formItem.legalPersonBirthday = time
      },
      uploadImg () {
        this.msg = 2
      },
      // 头像上传成功
      HeadPortrait (res) {
        if (res.code === 0) {
          this.$Message.success('上传成功')
        } else {
          this.$Message.error('上传失败')
        }
        this.formItem.file = res.data
        this.headPhoto = res.data
        this.$api.post(0, '/auth/user/uploadEnterpriseHeadPhoto', {uuid: this.formItem.uuid, file: this.formItem.file}, r => {
          console.log(r)
        })
      },
      // 身份证正面上传
      EnterpriseCard (res) {
        if (res.code === 0) {
          this.$Message.success('上传成功')
        } else {
          this.$Message.error('上传失败')
        }
        this.formItem.corporateIdentityCardIs = res.data
        this.$api.post(0, '/auth/user/businessLicense', {uuid: this.formItem.uuid, corporateIdentityCardIs: this.formItem.corporateIdentityCardIs, corporateIdentityCardThe: this.formItem.corporateIdentityCardThe, businessLicense: this.formItem.businessLicense}, r => {
          console.log(r)
        })
      },
      // 身份证反面上传
      EnterpriseCard1 (res) {
        if (res.code === 0) {
          this.$Message.success('上传成功')
        } else {
          this.$Message.error('上传失败')
        }
        this.formItem.corporateIdentityCardThe = res.data
        this.$api.post(0, '/auth/user/businessLicense', {uuid: this.formItem.uuid, corporateIdentityCardIs: this.formItem.corporateIdentityCardIs, corporateIdentityCardThe: this.formItem.corporateIdentityCardThe, businessLicense: this.formItem.businessLicense}, r => {
          console.log(r)
        })
      },
      // 营业执照上传
      BusinessLicense (res) {
        if (res.code === 0) {
          this.$Message.success('上传成功')
        } else {
          this.$Message.error('上传失败')
        }
        this.formItem.businessLicense = res.data
        console.log(this.formItem.uuid)
        this.$api.post(0, '/auth/user/businessLicense', {uuid: this.formItem.uuid, corporateIdentityCardIs: this.formItem.corporateIdentityCardIs, corporateIdentityCardThe: this.formItem.corporateIdentityCardThe, businessLicense: this.formItem.businessLicense}, r => {
          console.log(r)
        })
      },
      Submit () {
        this.formItem.legalPersonNativePlace = String(this.formItem.legalPersonNativePlace)
        console.log(this.formItem)
        this.$api.post(0, '/auth/user/enterpriseInformation', this.formItem, r => {
          console.log(r.data.code)
          if (r.data.code === 0) {
            this.$Message.success('提交成功')
            // this.formItem = {}
          }
        })
      },
      handleReset () {
        this.formItem = {}
      }
    },
    mounted () {
      this.formItem.uuid = JSON.parse(sessionStorage.user).uuid
      this.EnterpriseInfo = JSON.parse(sessionStorage.user)
      // 根据id获取用户信息
      this.$api.post(0, '/auth/user/userInfoById/' + this.EnterpriseInfo.id, {}, data => {
        console.log(data.data)
        if (data.data.data.headphoto == null) {
          this.headPhoto = '../../../static/images/class_name5.png'
        } else {
          this.headPhoto = data.data.data.headphoto
        }
        if (data.data.data.legalPersonSex === 1) {
          this.sex_flag = '男'
        } else if (data.data.data.legalPersonSex === 2) {
          this.sex_flag = '女'
        }
        this.legalPersonBirthday_flag = data.data.data.legalPersonBirthday
        this.formItem = data.data.data
      })
    }
  }
</script>

<style lang="less">
  @redColor: #d00210;
  .Enterprise-Main{
    width: 100%;
    height: auto;
    .cardFlex{
      .ivu-card-body{
        display: flex;
      }
    }
    .Enterprise-Main-concent-li-card{
      width: 100%;
      height: 235px;
      position: relative;
      // 头像上传的btn
      .HeadPortrait{
        width: 300px;
        height: 200px;
        position: absolute;
        left: 20px;
        top: 16px;
        z-index: 200;
        background: rgba(255,255,255,0.2);
      }
      .HeadPortrait-Img{
        width: 300px;
        height: 200px;
        position: absolute;
        left: 20px;
        top: 16px;
      }
      // 身份证上传的btn正面
      .EnterpriseCard{
        width: 300px;
        height: 200px;
        position: absolute;
        left: 20px;
        top: 16px;
        z-index: 200;
        background: rgba(255,255,255,0.2);
      }
      .EnterpriseCard-Img{
        width: 300px;
        height: 200px;
        position: absolute;
        left: 20px;
        top: 16px;
      }
      // 身份证上传的btn反面
      .EnterpriseCard1{
        width: 300px;
        height: 200px;
        position: absolute;
        left: 380px;
        top: 16px;
        z-index: 200;
        background: rgba(255,255,255,0.2);
      }
      .EnterpriseCard1-Img{
        width: 300px;
        height: 200px;
        position: absolute;
        left: 380px;
        top: 16px;
      }
      // 营业执照
      .businessLicense{
        width: 300px;
        height: 200px;
        position: absolute;
        left: 20px;
        top: 16px;
        z-index: 200;
        background: rgba(255,255,255,0.2);
      }
      .businessLicense-Img{
        width: 300px;
        height: 200px;
        position: absolute;
        left: 20px;
        top: 16px;
      }
    }
    .ivu-icon-ios-close{
      line-height: 30px;
    }
    .Enterprise-Main-tab{
      width: 320px;
      height: 100%;
      margin-right: 20px;
      float: left;
      display: flex;
      flex-direction: column;
      .Enterprise-Main-tab-news{
        width: 100%;
        height: 240px;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        padding: 10px 0 30px 0;
        .Enterprise-Main-tab-img{
          width: 180px;
          height: 180px;
          border-radius: 50%;
          position: relative;
          img{
            display: block;
            width: 60%;
            height: 60%;
            border-radius: 50%;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
          }
        }
        .Enterprise-Main-tab-news-name{
          font-size: 0.2rem;
        }
      }
      .Enterprise-Main-tab-li{
        width: 100%;
        height: auto;
        background: #fff;
        padding: 45px 0;
        li{
          display: inline-block;
          width: calc(100% - 40px);
          height: 88px;
          text-align: center;
          line-height: 88px;
          border-bottom: 1px dashed #f2f2f2;
          margin: 0 20px;
          font-size: 0.2rem;
          cursor: pointer;
        }
      }
      .LiActive{
        color: @redColor;
      }
    }
    .Enterprise-Main-concent{
      width: calc(100% - 320px - 20px);
      min-height: 604px;
      background: #fff;
      float: left;
      .Enterprise-Main-concent-li{
        width: 100%;
        height: auto;
        padding: 50px;
      }
      .Enterprise-Main-concent-sub{
        width: 84px;
        height: 30px;
        line-height: 10px;
        background: @redColor;
        color: #fff;
        margin-top: 50px;
        margin-right: 30px;
      }
      .Enterprise-Main-concent-can{
        width: 84px;
        height: 30px;
        line-height: 10px;
        background: #eeeefe;
        margin-top: 50px;
        &:hover{
          border-color: #eeeefe;
          color: #000;
        }
      }
    }
  }
</style>
